<template>
	<view style="height: 1400rpx;width: auto;background-color: #2a73b5;">
	<view class="container">
		<u-notify message="Hi uView" :show="show"></u-notify>
		<view class="logintop">
			<span>欢迎登录江苏师范大学教学会议室管理系统</span>
		</view>
		<view class="main" >
			<a style="float: right;color: #010178;font-size: 20rpx;margin-right: 25rpx;" @click="handleRegister">注册账号</a>
			<view style="width: 500rpx;margin: 50rpx auto;">
				<u--form 
								labelPosition="left"
								:model="model1"
								ref="form1"
						>
							<u-form-item
									label="账号"
									borderBottom
									ref="item1"
							>
								<u--input
										v-model="model1.userInfo.userId"
										border="none"
								></u--input>
							</u-form-item>
							<u-form-item
									label="密码"
									borderBottom
									ref="item1"
							>
								<u--input
										v-model="model1.userInfo.password"
										border="none"
										type="password"
								></u--input>
							</u-form-item>
							<u-form-item
									label="角色"
									borderBottom
									@click="showSex = true;"
									ref="item1"
							>
								<u--input
										v-model="model1.userInfo.name"
										disabled
										disabledColor="#ffffff"
										placeholder="请选择角色"
										border="none"
								></u--input>
								<u-icon
										slot="right"
										name="arrow-right"
								></u-icon>
							</u-form-item>
						</u--form>
						<u-action-sheet
								:show="showSex"
								:actions="actions"
								title="请选择角色"
								@close="showSex = false"
								@select="sexSelect"
						>
						</u-action-sheet>
			</view>
					<u-button type="primary" text="登录" style="margin: 180rpx;width: 350rpx;" @click="handleLogin"></u-button>
		</view>
		<view class="footer" style="display: flex;flex-direction: row;">
			<view style="color: #2979FF;margin-left: 200rpx;">关于</view>
			<view style="color: #2979FF;margin-left: 200rpx;">帮助</view>
		</view>
		
	</view>
	</view>
</template>

<script style="scoped">
	import {mapActions} from 'vuex'
	export default {
		data() {
			return {
				showSex: false,
				show:true,
				model1:{
					userInfo: {
						userId: '',
						password: '',
						name:''
					},
				},
				actions: [{
					name: '教师',
					},
					{
						name: '教务老师',
					},
					{
						name: '管理员',
					},
				],
				rules: {
					'userInfo.userId': [{
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change']
					},
					{
								min: 8,
								max: 8,
								message: '长度在8个字符'
							},
					],
					'userInfo.password': {
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					'userInfo.name': {
						max: 1,
						required: true,
						message: '请选择角色',
						trigger: ['blur']
					},
				},
				radio: '',
				switchVal: false
			}
		},
		onLoad() {
		},
		methods: {
			...mapActions([
			                'Login',
			                'getUserInfo'
			            ]),
			sexSelect(e){
				this.model1.userInfo.name = e.name
			},
			handleRegister(){
				uni.navigateTo({
					url:"../register/register"
				})
			},
			handleLogin(){
				console.log(this.model1.userInfo)
				this.Login(this.model1.userInfo).then(()=>{
					if(this.model1.userInfo.name==='教师'){
						uni.switchTab({
							url:'../index/index'
						})
					}else if(this.model1.userInfo.name==='教务老师'){
						uni.switchTab({
							url:'../index/index'
						})
					}else{
						uni.switchTab({
							url:'../index/index'
						})
					}
					 uni.showToast({
									icon: 'success',
									position: 'bottom',
									title: '登录成功'
								})
					})
			
			}
		}
	}
</script>

<style>
.container{
	display: flex;
	justify-content: center;
	flex-direction: column;
	background: url(../../static/common/34a5b41100e6cd17101823a17d9e631e.jpeg) no-repeat center center;
}
.logintop{
	height: 240rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.logintop .ul{
	list-style: none;
	display: inline-flex;
}
.logintop .ul .li{
	margin: 5px;
}
.main{
	height: 959rpx;
}
</style>
